<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">FAB 浮动按钮</div>
    </ons-toolbar>

    <div style="padding: 20px; padding-bottom: 100px;">
        <h3>浮动操作按钮 (FAB)</h3>
        <p style="color: #666; line-height: 1.6;">
            FAB（Floating Action Button）是一个浮动在页面上的圆形按钮，通常用于主要操作。
        </p>

        <h3 style="margin-top: 30px;">基础 FAB</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="color: #666;">
                    右下角有一个基础的 FAB 按钮，点击它会触发操作。
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('basic-fab-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-basic-fab-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-basic-fab-code" onclick="event.stopPropagation(); copyCode('basic-fab-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-basic-fab-code">
                <pre><code id="code-content-basic-fab-code">&lt;!-- HTML --&gt;
&lt;ons-fab position="bottom right" onclick="fabClicked()"&gt;
    &lt;ons-icon icon="md-plus"&gt;&lt;/ons-icon&gt;
&lt;/ons-fab&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function fabClicked() {
    ons.notification.toast('FAB 按钮被点击', {
        timeout: 1500
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">不同位置</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="color: #666;">
                    FAB 可以放置在页面的不同位置：
                </p>
                <ul style="color: #666; line-height: 1.8;">
                    <li>右下角（默认）- position="bottom right"</li>
                    <li>左下角 - position="bottom left"</li>
                    <li>右上角 - position="top right"</li>
                    <li>左上角 - position="top left"</li>
                    <li>中间底部 - position="bottom center"</li>
                </ul>
            </div>
            <div class="code-actions" onclick="toggleCode('position-fab-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-position-fab-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-position-fab-code" onclick="event.stopPropagation(); copyCode('position-fab-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-position-fab-code">
                <pre><code id="code-content-position-fab-code">&lt;!-- 右下角（默认） --&gt;
&lt;ons-fab position="bottom right"&gt;
    &lt;ons-icon icon="md-plus"&gt;&lt;/ons-icon&gt;
&lt;/ons-fab&gt;

&lt;!-- 左下角 --&gt;
&lt;ons-fab position="bottom left"&gt;
    &lt;ons-icon icon="md-plus"&gt;&lt;/ons-icon&gt;
&lt;/ons-fab&gt;

&lt;!-- 右上角 --&gt;
&lt;ons-fab position="top right"&gt;
    &lt;ons-icon icon="md-plus"&gt;&lt;/ons-icon&gt;
&lt;/ons-fab&gt;

&lt;!-- 左上角 --&gt;
&lt;ons-fab position="top left"&gt;
    &lt;ons-icon icon="md-plus"&gt;&lt;/ons-icon&gt;
&lt;/ons-fab&gt;

&lt;!-- 中间底部 --&gt;
&lt;ons-fab position="bottom center"&gt;
    &lt;ons-icon icon="md-plus"&gt;&lt;/ons-icon&gt;
&lt;/ons-fab&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">Speed Dial</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="color: #666;">
                    点击左下角的 FAB 按钮可以展开更多操作选项（Speed Dial）。
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('speed-dial-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-speed-dial-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-speed-dial-code" onclick="event.stopPropagation(); copyCode('speed-dial-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-speed-dial-code">
                <pre><code id="code-content-speed-dial-code">&lt;!-- HTML --&gt;
&lt;ons-speed-dial position="bottom left" direction="up" id="speedDial"&gt;
    &lt;ons-fab&gt;
        &lt;ons-icon icon="md-menu"&gt;&lt;/ons-icon&gt;
    &lt;/ons-fab&gt;
    &lt;ons-speed-dial-item onclick="speedDialAction('编辑')"&gt;
        &lt;ons-icon icon="md-edit"&gt;&lt;/ons-icon&gt;
    &lt;/ons-speed-dial-item&gt;
    &lt;ons-speed-dial-item onclick="speedDialAction('分享')"&gt;
        &lt;ons-icon icon="md-share"&gt;&lt;/ons-icon&gt;
    &lt;/ons-speed-dial-item&gt;
    &lt;ons-speed-dial-item onclick="speedDialAction('删除')"&gt;
        &lt;ons-icon icon="md-delete"&gt;&lt;/ons-icon&gt;
    &lt;/ons-speed-dial-item&gt;
&lt;/ons-speed-dial&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function speedDialAction(action) {
    var speedDial = document.getElementById('speedDial');
    speedDial.hideItems();
    
    ons.notification.toast('执行操作: ' + action, {
        timeout: 1500
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">示例内容</h3>
        <ons-list>
            <ons-list-item>列表项 1</ons-list-item>
            <ons-list-item>列表项 2</ons-list-item>
            <ons-list-item>列表项 3</ons-list-item>
            <ons-list-item>列表项 4</ons-list-item>
            <ons-list-item>列表项 5</ons-list-item>
        </ons-list>

        <ons-card style="margin-top: 20px;">
            <div class="title">提示</div>
            <div class="content">
                滚动页面时，FAB 按钮会保持在固定位置。
            </div>
        </ons-card>

        <div style="height: 300px; background-color: #f5f5f5; margin-top: 20px; padding: 20px; border-radius: 8px;">
            <p style="text-align: center; padding-top: 100px; color: #999;">
                这是一些填充内容<br>用于演示滚动效果
            </p>
        </div>
    </div>

    <!-- 基础 FAB -->
    <ons-fab position="bottom right" onclick="fabClicked()">
        <ons-icon icon="md-plus"></ons-icon>
    </ons-fab>

    <!-- Speed Dial FAB -->
    <ons-speed-dial position="bottom left" direction="up" id="speedDial">
        <ons-fab>
            <ons-icon icon="md-menu"></ons-icon>
        </ons-fab>
        <ons-speed-dial-item onclick="speedDialAction('编辑')">
            <ons-icon icon="md-edit"></ons-icon>
        </ons-speed-dial-item>
        <ons-speed-dial-item onclick="speedDialAction('分享')">
            <ons-icon icon="md-share"></ons-icon>
        </ons-speed-dial-item>
        <ons-speed-dial-item onclick="speedDialAction('删除')">
            <ons-icon icon="md-delete"></ons-icon>
        </ons-speed-dial-item>
    </ons-speed-dial>

    <script>
        function fabClicked() {
            ons.notification.toast('FAB 按钮被点击', {
                timeout: 1500
            });
        }

        function speedDialAction(action) {
            var speedDial = document.getElementById('speedDial');
            speedDial.hideItems();
            
            ons.notification.toast('执行操作: ' + action, {
                timeout: 1500
            });
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
